<template>
  <div class="home">
    <v-header />
    <div class="content">
      <div class="top">
        <div class="top-html">
          <p class="title"> 失联修复</p>
          <p class="desc">催收员时间成本降低约25%   案件触达率提升约13%   回款率提升超5%</p>

        </div>
      </div>
      <div class="aitool">
        <h3>用大数据解决金融行业促活痛点</h3>
        <p class="lost-desc">失联修复为金融行业提供催收业务管理的一站式服务。服务融合三大运营商修复资源，实时获取债务人手机状态，精准匹配有效手机号码，实现高效修复；并联合业内多家本地化专业催收机构，解决地域性问题，实现高效电催。</p>
        <div class="project">
          <ul >
            <li class="item" v-for="(item,index) in items" :key="index">
              <img :src=item.srcPic :alt=item.title>
              <p class="title" v-text="item.title"></p>
              <p class="content" v-html="item.content"></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="advantage">
        <div class="wrap">
          <h4>我们的优势</h4>

          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/safe.png" alt="安全">
              <span>安全</span>
            </div>
            <div class="wrap-desc">• 电信级安全保障 • 具备催收服务资质 • 服务过程合法合规</div>
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/reliable.png" alt="可靠">
              <span>可靠</span>
            </div>
            <div class="wrap-desc">• 央企合作平台品质服务保障  • 组织和管理机构及规章制度健全</div>
          </div>
          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/specialty.png" alt="专业">
              <span>专业</span>
            </div>
            <div class="wrap-desc">• 服务流程专业 • 服务人员专业 • 服务工具专业</div>
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/amity.png" alt="友好">
              <span>友好</span>
            </div>
            <div class="wrap-desc">• 可视化界面 • 事件响应及时 • 互动沟通及时</div>
          </div>
          
        </div>
      </div>
      <div class="case">
        <h4>成功案例</h4>
        <div class="case-list">
          <img :src=item.url :alt=item.title v-for="(item,index) in imgUrl" :key="index" />
        </div>
      </div>
    </div>
    <v-contact/>
    <v-footer/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items:[
        {title:'信息匹配',content:'实现手机号码的清洗和失联债务人<br/>的信息区配的补全，合法高效的实<br/>现精准触达客户。',srcPic:require('./images/match.png')},
        {title:'安全保障',content:'信息脱敏处理，从号码清洗到补全，<br/>到电话催收，在产品内形成闭环，<br/>规避数据泄露风险。',srcPic:require('./images/safeguard.png')},
        {title:'高效化运作',content:'引入业界专业催收公司，建立业务<br/>高效能催收业务系统。',srcPic:require('./images/efficient.png')},
        {title:'可视化管理',content:'服务产品化、标准化、可视化全流程<br/>线上管理，案件进展实时查看。',srcPic:require('./images/visual.png')}
      ],
      imgUrl:[
        {url:require('./images/xingye.png'),title:'兴业银行'},
        {url:require('./images/baoshang.png'),title:'包商银行'},
        {url:require('./images/dadi.png'),title:'大地时贷'},
        {url:require('./images/guangda.png'),title:'广大信用卡'},
        {url:require('./images/guangfa.png'),title:'广发银行'},
        {url:require('./images/maizi.png'),title:'麦子金服'},
        {url:require('./images/yixin.png'),title:'宜信惠普'},
        {url:require('./images/pingan.png'),title:'中国平安'},
        {url:require('./images/huaxia.png'),title:'华夏银行'},
        {url:require('./images/minsheng.png'),title:'中国民生银行'},
      ]
    }
  }
}
</script>
<style scoped>
.content{
  width: 100%;
  background-color: #fff;
  
}
.top{
  width: 100%;
  height: 400px;
  box-sizing: border-box;
  background: url('./images/callshowhome.jpg') center/cover no-repeat;
}
.top .top-html{
  padding-top: 130px;
}
.top p{
  padding: 0;
  text-align: center;
}
.top p.title{
  color: #3DD18F;
  font-size: 25px;
}
.top p.desc{
  color: #fff;
  font-size: 20px;
}
.aitool{
  width: 100%;
  height: 400px;
}
.aitool h3{
  font-weight: 600;
  font-size: 24px;
  color: #3E4D60;
  text-align: center;
  padding-top: 80px;
  box-sizing: content-box;
  margin: 0;
  padding: 50px 0 30px
}
.aitool .lost-desc{
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  font-size: 14px;
  color: #333333;
  line-height: 25px;
}
.project{
  width: 1100px;
  margin: 0 auto;
}
.project ul{
  width: 100%;
  margin: 0;
  padding: 20px 0 0;
}
.project ul li{
  width: 25%;
  float: left;
  list-style: none
}
.project ul li.item p.title{
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333333;
}
.project ul li.item p.content{
  font-size: 13px;
  color: #666666;
  line-height: 25px;
}
.project ul li.item p{
  font-size: 13px;
  color: #666666;
  line-height: 25px;
}

.advantage{
  width: 100%;
  height:420px;
  background: url('./images/home2.jpg') center/cover no-repeat;
}
.wrap{
  width: 1000px;
  margin: 0 auto;
}
.wrap h4{
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0 auto;
  padding: 40px 0 10px;
  box-sizing: content-box
}
.wrap .wrap-item{
  width: 50%;
  text-align: left;
  float: left;
  margin-top: 30px;
}
.wrap .wrap-item .wrap-pic{
  width: 100%;

}
.wrap .wrap-item .wrap-pic img{
  width: 70px;
  height: 70px;
  vertical-align: middle;
}
.wrap .wrap-item .wrap-pic span{
  display: inline-block;
  color: #fff;
  margin-left: 20px;
  font-size: 20px;
}
.wrap .wrap-item .wrap-desc{
  width: 90%;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
  margin-top: 10px;
}
.mar-r .wrap-pic img,.mar-r .wrap-desc{
  margin-left: 50px;
}
.case{
  height: 364px;
  box-sizing: content-box;
}
.case h4{
  margin: 0 auto;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
  color: #3E4D60;
  padding: 60px 0 50px;
}
.case .case-list{
  width: 1100px;
  margin: 0 auto
}
.case .case-list img{
  width: 190px;
  height: 60px;
  margin-bottom: 30px;
  display: block;
  float: left;
  margin-right: 35px;
}
.case .case-list img:nth-child(5n){
  margin-right: 0;
}

</style>
  